import React, {useState, useEffect} from "react";

/**
 * useState：
 *     1. useState 初始化 state 值
 *     2. count 当前状态
 *     3. setCount 更新状态的函数，覆盖更新
 *
 * 函数式更新
 *     1. 需要先前的 state ，可将函数传递给 setState ，第一个参数就是先前的值。
 *
 * 惰性初始 state
 *     1. useState 可传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用。
 *
 * 跳过 state 更新
 *     1. useCount 传入 count 时，React 将跳过子组件的渲染及 effect 的执行。
 *     2. 可测试下面的 Click me 1 按钮
 */
export function HookTest1() {
    // 声明一个叫 "count" 的 state 变量
    const [count, setCount] = useState(0);

    useEffect(() => {
        alert(`effect 执行测试`);
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count)}>
                Click me 1
            </button>
            <button onClick={() => setCount(count + 1)}>
                Click me 2
            </button>
            <button onClick={() => setCount(prevCount => prevCount + 1)}>
                Click me 3
            </button>
        </div>
    );
}
